<!DOCTYPE html>
<!--
Copyright 2012 The Polymer Authors. All rights reserved.
Use of this source code is governed by a BSD-style
license that can be found in the LICENSE file.
-->
<html>
  <head>
    <title></title>
    <script src="lib/loader.js"></script>
    <style>
      div, g-A, g-B, g-C, g-D {
        display: block;
        border: 1px dotted red;
        margin: 8px;
        padding: 8px;
      }
    </style>
    <script>
      change = function() {
        A = $("g-A");
        A.webkitCreateShadowRoot().appendChild($("template#A").content);
        //
        B = A.webkitShadowRoot.querySelector("g-B");
        B.webkitCreateShadowRoot().appendChild($("template#B").content);
        //
        C = B.webkitShadowRoot.querySelector("g-C");
        C.webkitCreateShadowRoot().appendChild($("template#C").content);
        //
        D = C.webkitShadowRoot.querySelector("g-D");
        D.webkitCreateShadowRoot().appendChild($("template#D").content);
      }
    </script>
  </head>
  <body onload="change()">
      <g-A><span id="a1">Where am I?</span></g-A>

      <template id="A">[A->]<g-B><content></content></g-B>[<-A]</template>
      <template id="B">[B->]<g-C><content></content></g-C>[<-B]</template>
      <template id="C">[C->]<g-D><content></content></g-D>[<-C]</template>
      <template id="D">[D->][<content></content>][<-D]</template>

      <hr/>

      Expected output (also, see console):

      <div>[A-&gt;]<div>[B-&gt;]<div>[C-&gt;]<div>[D-&gt;][<span id="a1">Where am I?</span>][&lt;-D]</div>[&lt;-C]</div>[&lt;-B]</div>[&lt;-A]</div>

</body>
</html>
